<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<form id="form" class="layui-form-pane">
    <input id="menuId" name="menuId" type="hidden" th:value="${menu.getMenuId()}">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">标题：</label>
        <div class="layui-input-block">
            <input class="layui-input" id="mname" name="mname" th:value="${menu.getMname()}"  autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-block">
            <select id="type" name="type" class="layui-select" style="width: 170px; padding: 0px; padding-left: 10px" lay-verify="required" lay-search="">
                <option value="0" th:selected="${menu.getType() == 0}" >菜单标题</option>
                <option value="1" th:selected="${menu.getType() == 1}" >按钮标题</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">父类节点：</label>
        <div class="layui-input-block">
            <input type="text" id="tree" lay-filter="tree" class="layui-input" />
            <input type="hidden" id="father" name="father" th:value="${menu.getFather()}"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">排序级别：</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="idx" name="idx" readonly th:value="${menu.getIdx()}" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="address" name="address" th:value="${menu.getAddress()}" placeholder="没有填 ‘#’ "  autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">权限：</label>
        <div class="layui-input-block">
            <input class="layui-input" id="perms" name="perms" th:value="${menu.getPerms()}" placeholder="例：ROLE_ADD_ADD"  autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">icon：</label>
        <div class="layui-input-block">
            <input class="layui-input" id="icon" style="width: 80px" name="icon" th:value="${menu.getIcon()}" readonly value="#" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <!--<label class="layui-form-label">icon：</label>
        <div class="layui-input-block">-->
        <button type="button" class="layui-btn" th:onclick="xuan()" style="width: 80px;" >选择<i id="show" class="layui-icon" th:utext="${menu.getIcon()}"></i></button>
        <!--</div>-->
    </div>
    <br/>
    <div class="layui-form-item layui-inline" style="float: right; margin-right: 10px;">
        <button class="layui-btn" id="addMenu">提交</button>
        <button class="layui-btn layui-btn-danger" onclick="closePage()">关闭</button>
    </div>
</form>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/module/treeSelect/treeSelect.js}"></script>
<script th:inline="javascript">
    var index = parent.layer.getFrameIndex(window.name);
    layui.use('form','layer',function(){
        var form = layui.form;
        form.render();
    });
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    layui.config({
        base: '/module/treeSelect/' // js地址
    }).extend({
        treeSelect: 'treeSelect'
    });
    layui.use(['treeSelect','form'], function () {
        var treeSelect= layui.treeSelect;

        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/menu/fatherMenuTree',
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '原值为：'+[[${menu.getFather()}]],
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(d){
                console.log(d);
                var start =d.current.id;
                var end ="";
                $('#father').val(start);
                //排序级别设置
                end=d.current.children.length+1;
                // alert(start+"."+end);
                $('#idx').val(start+"."+end);
                /*$('#idx').text(start+"."+end);*/
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);
              /*  alert(d.data.length);
                $('#idx').val(d.data.length+1);*/
//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);
//                刷新树结构
                //treeSelect.refresh();
            }
        });
    });

    function closePage() {
        parent.layer.close(index);//关闭当前页
    }

    $('#addMenu').click(function(){
        var val = $('#father').val();
        /*if(val === ''){
            parent.layer.msg('姓名不能为空');
            return;
        }*/

        $.ajax({
            type:'post',
            url:'/menu/saveMenu',
            data:$("#form").serialize(),
            dataType: "text",
            async: false,
            success:function (data) {
                if (data === 1){
                }
            }
        });
        window.parent.location.reload();//刷新父页面
        parent.layer.close(index);
    });
    function xuan() {

        layer.open({
            type: 2,
            area: ['600px', '300px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/menu/icon/}]]
    });
        /*return false*/
    }
</script>
</html>